<script setup lang="ts">
import { ODropdownItem, OIcon, OLink, useMessage } from '@opensig/opendesign';
import { ClickOutside as vClickOutside, ElPopover } from 'element-plus';
import IconFeedbackShare from '~icons/app/icon-feedback-share.svg';
import { openWindow } from '@/utils/common.ts';
import { computed, ref, watch } from 'vue';
import { GITCODE_URL } from '@/config/url-config';
import { useMenuStore } from '@/stores/menu.ts';
import { storeToRefs } from 'pinia';
import { useSearchingStore } from '@/stores/common.ts';

const searchingStore = useSearchingStore();
const { isSearching } = storeToRefs(searchingStore);

const menuStore = useMenuStore();
const { lastBread } = storeToRefs(menuStore);

const message = useMessage();
const props = withDefaults(defineProps<{
  type?: 'select' | 'hover' | 'click',
  visible?: boolean,
  position?: 'top' | 'top-end' | 'left-start',
  from?: string,
  anchor: boolean,
}>(), {
  position: 'top',
  type: 'click',
  anchor: true,
});

const submitFeedback = (feedbackType: 'pr' | 'issue') => {
  if (!lastBread?.value?.href) {
    return;
  }
  const selectionText = window.getSelection()?.toString();
  if (props.type === 'hover') {
    if (selectionText) {
      message.success({ content: '文本已复制到剪贴板' });
      navigator.clipboard.writeText(selectionText);
    }
  }
  if (feedbackType === 'pr') {
    openWindow(`${GITCODE_URL}docs/blob/main${lastBread.value.href}.md`);
  }
  if (feedbackType === 'issue') {
    openWindow(`${GITCODE_URL}docs/issues/create?labels=docs&title=${lastBread.value?.label || ''}&description=${lastBread.value?.label || ''}`);
  }
};

// -------------------- 虚拟触发 --------------------
const inControl = computed(() => props.type === 'select');

const currentVisible = ref(false);
watch(() => props.visible, (val) => {
  if (inControl.value) {
    currentVisible.value = val;
  }
}, {
  immediate: true,
});
const emits = defineEmits(['update:visible']);
const clickBtn = () => {
  if (!inControl.value) {
    currentVisible.value = true;
    emits('update:visible', true);
  }
};
const clickBtnOutside = () => {
  if (!inControl.value) {
    currentVisible.value = false;
    emits('update:visible', false);
  }
};
</script>

<template>
  <el-popover
    :trigger="type === 'select' ? undefined : type"
    :placement="position"
    popper-class="feedback-popover"
    width="auto"
    v-bind="{
      ...(type === 'hover' ? {} : {
        visible: currentVisible && !isSearching,
      })
    }"
    :show-arrow="anchor"
  >
    <template #reference>
      <slot v-if="inControl"></slot>
      <div @click="clickBtn" v-click-outside="clickBtnOutside" v-else>
        <slot></slot>
      </div>
    </template>
    <ODropdownItem v-analytics.addUrl="{ service: 'docs', properties: { type: 'button', module: 'feedback', target: 'Pull Request反馈' } }" @click="submitFeedback('pr')">
      <OLink color="primary">
        <span>Pull Request反馈&nbsp;</span>
        <OIcon>
          <IconFeedbackShare />
        </OIcon>
      </OLink>
      <div class="item-desc" v-if="from === 'floating'">用于直接修改代码更改，包括改进文档、修复错误等</div>
    </ODropdownItem>
    <ODropdownItem v-analytics.addUrl="{ service: 'docs', properties: { type: 'button', target: 'Issue反馈' } }" @click="submitFeedback('issue')">
      <OLink color="primary">
        <span>Issue反馈&nbsp;</span>
        <OIcon>
          <IconFeedbackShare />
        </OIcon>
      </OLink>
      <div class="item-desc" v-if="from === 'floating'">用于提出问题或建议，包括错误报告、功能请求或任务讨论</div>
    </ODropdownItem>
  </el-popover>
</template>

<style lang="scss">
.feedback-popover {
  --el-popover-padding: 5px 4px;
  --el-popper-border-radius: 8px;

  .o-dropdown-item {
    justify-content: flex-start;
    padding: 7px 12px;
    --dropdown-item-color-hover: inherit;
    @include text1;
    display: block;

    svg path {
      fill: currentColor;
    }
    .o-icon {
      @include text1;
    }
    .o-link {
      display: block;
      .o-link-main {
        display: flex;
        align-items: center;
      }
    }
    .item-desc {
      color: var(--o-color-info3);
      margin-top: 8px;
      max-width: 236px;
      @include tip1;
    }
    @include hover {
      .o-link {
        color: var(--o-color-ubmc-hover);
      }
    }
  }
}

.popover-content {
  width: 200px;

  span:first-child {
    font-weight: 500;
  }
}
</style>
